<template>
  <!-- 角色管理页面 -->
  <div class>
    <div>
      <a-button type="primary" icon="plus-circle" @click="showModal">新增角色</a-button>
      <div class="searchbox">
        <a-input
          placeholder="角色名称"
          v-model="roleName_$_like"
          style="width:250px"
          class="rightstyle"
        />
        <a-button type="primary" @click="handlesearchData" class="rightstyle">搜索</a-button>
        <a-button type="primary" @click="handlesearchclear">重置</a-button>
      </div>
    </div>
    <!-- 新增菜单按钮的弹出框 -->
    <a-modal v-model="visible" :title="modaltitle" @ok="handleOk">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="角色名称">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input v-model="form.bjcontent" />
        </a-form-model-item>
        <a-form-model-item label="权限">
          <a-table
            :columns="columnstable"
            :data-source="tabledata"
            :defaultExpandAllRows="false"
            size="small"
            :pagination="false"
            :rowKey="record => record.id"
          >
            <span slot="customTitle">
              <a-checkbox @change="onChangeRedeAll" v-model="checkedAll">读</a-checkbox>
            </span>
            <span slot="operationTitle">
              <a-checkbox @change="onChangeWriteAll" v-model="checkedAllwrite">写</a-checkbox>
            </span>

            <span slot="action" slot-scope="text, record">
              <a-checkbox @change="onChangeRede(record)" v-model="record.checked">读</a-checkbox>
            </span>
            <span slot="operation" slot-scope="text, record">
              <a-checkbox @change="onChangeWrite(record)" v-model="record.checkedwrite">写</a-checkbox>
            </span>
          </a-table>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- table -->
    <a-table
      :columns="columns"
      :data-source="data"
      :rowKey="record=> record.id"
      defaultExpandAllRows
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleDel(record)">删除</a>
      </span>
    </a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkedAll: false,
      checkedAllwrite: false,
      columnstable: [
        {
          title: "名称",
          dataIndex: "menuName"
        },
        {
          key: "action",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "action" }
        },
        {
          slots: { title: "operationTitle" },
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      tabledata: [],
      syRoleMenuList: null,
      roleName_$_like: "",
      modaltitle: "新增角色",
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      form: {},
      visible: false,
      setroleid: "",
      columns: [
        {
          title: "角色名",
          dataIndex: "roleName",
          key: "roleName"
        },
        {
          title: "备注信息",
          dataIndex: "remark",
          key: "remark"
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" }
        }
      ],
      data: []
    };
  },
  mounted() {
    this.query();
    this.$axios.post("/menu/service/findByPage", {}).then(res => {
      this.tabledata = res.data;
      this.tabledata.forEach(item => {
        this.$set(item, "checked", false);
        this.$set(item, "checkedwrite", false);
        if (item.children) {
          item.children.forEach(citem => {
            this.$set(citem, "checked", false);
            this.$set(citem, "checkedwrite", false);
          });
        }
      });
    });
  },
  computed: {
    leaveDataNew() {
      return this.tabledata; //watch监听要求
    }
  },
  watch: {
    leaveDataNew: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
        this.watchHandler(newValue);
      },
      immediate: false,
      deep: true
    }
  },
  methods: {
    helpmenu() {
      this.$axios.post("/menu/service/findByPage", {}).then(res => {
        this.tabledata = res.data;
        this.tabledata.forEach(item => {
          this.$set(item, "checked", false);
          this.$set(item, "checkedwrite", false);
          if (item.children) {
            item.children.forEach(citem => {
              this.$set(citem, "checked", false);
              this.$set(citem, "checkedwrite", false);
            });
          }
        });
      });
    },
    watchHandler(newValue) {
      let state = newValue.every(item => {
        return item.checked == true;
      });
      this.checkedAll = state;
    },
    query() {
      this.$axios.post("/role/service/findByPage", {}).then(res => {
        console.log(res);
        if (res.code == 200) {
          console.log(res);
          this.data = res.data;
        }
      });
    },
    handleOk() {
      let that = this;
      let data = {};
      let data1 = that.tabledata;
      let setdata = [];
      let setwritedata = [];
      data1.forEach(i => {
        if (i.checked == true) {
          setdata.push({
            menuId: i.id,
            readorwrite: 1
          });
          i.children.forEach(child => {
            if (child.checked == true) {
              setdata.push({
                menuId: child.id,
                readorwrite: 1
              });
            } else if (child.checked == false && child.checkedwrite == true) {
              setwritedata.push({
                menuId: child.id,
                readorwrite: 2
              });
            }
          });
        } else {
          //false
          if (i.checkedwrite == true) {
            setwritedata.push({
              menuId: i.id,
              readorwrite: 2
            });
            i.children.forEach(child => {
              if (child.checkedwrite == true) {
                setwritedata.push({
                  menuId: child.id,
                  readorwrite: 2
                });
              }
            });
          }
        }
      });
      setdata.forEach(citem => {
        setwritedata.push(citem);
      });
      console.log(setwritedata);
      that.syRoleMenuList = setwritedata;
      switch (that.modaltitle) {
        case "编辑角色":
          data = {
            id: that.setroleid,
            roleName: that.form.name,
            remark: that.form.bjcontent,
            syRoleMenuList: that.syRoleMenuList
          };
          that.$axios.post("/role/service/edit", data).then(res => {
            if (res.code == 200) {
              console.log(res);
              that.data = res.data;
              that.query();
              that.visible = false;
            }
          });
          break;
        case "新增角色":
          data = {
            roleName: that.form.name,
            remark: that.form.bjcontent,
            syRoleMenuList: that.syRoleMenuList
          };
          that.$axios.post("/role/service/create", data).then(res => {
            if (res.code == 200) {
              console.log(res);
              that.data = res.data;
              that.query();
              that.visible = false;
            }
          });

          break;
        default:
          return "";
      }
    },
    showModal() {
      this.visible = true;
      this.form = {};
      this.tabledata.forEach(item => {
        this.$set(item, "checked", false);
        this.$set(item, "checkedwrite", false);
        if (item.children) {
          item.children.forEach(citem => {
            this.$set(citem, "checked", false);
            this.$set(citem, "checkedwrite", false);
          });
        }
      });
    },
    handleEdit(record) {
      this.$axios.post("/menu/service/findByPage", {}).then(res => {
      this.tabledata = res.data;
      this.tabledata.forEach(item => {
        this.$set(item, "checked", false);
        this.$set(item, "checkedwrite", false);
        if (item.children) {
          item.children.forEach(citem => {
            this.$set(citem, "checked", false);
            this.$set(citem, "checkedwrite", false);
          });
        }
      });
    });
      this.$axios
        .post("/role/service/queryMenuByRoleId", { id: record.id })
        .then(res => {
          let setresdata = res.data;
          let olddata = this.tabledata;
          if (setresdata.length <= 0) {
            this.tabledata.forEach(item => {
              this.$set(item, "checked", false);
              this.$set(item, "checkedwrite", false);
              if (item.children) {
                item.children.forEach(citem => {
                  this.$set(citem, "checked", false);
                  this.$set(citem, "checkedwrite", false);
                });
              }
            });
          } else {
            olddata.forEach(item => {
              setresdata.forEach(i => {
                if (item.id == i.menuId) {
                  if (i.readorwrite == 1) {
                    item.checked = true;
                  }
                  if (i.readorwrite == 2) {
                    item.checkedwrite = true;
                  }
                }
              });
              item.children.forEach(citem => {
                setresdata.forEach(y => {
                  if (citem.id == y.menuId) {
                    if (y.readorwrite == 1) {
                      citem.checked = true;
                    } else if (y.readorwrite == 2) {
                      citem.checkedwrite = true;
                    }
                  }
                });
              });
            });
          }
          this.tabledata = olddata;
        });
      this.setroleid = record.id;
      this.visible = true;
      this.form = {
        name: record.roleName,
        bjcontent: record.remark
      };
      this.modaltitle = "编辑角色";
    },
    handleDel(record) {
      let data = {
        id: record.id,
        roleName: record.roleName,
        syRoleMenuList: []
      };
      let that = this;
      this.$confirm({
        title: "是否删除?",
        okText: "是的",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$axios.post("/role/service/deleteByIds", data).then(res => {
            if (res.code == 200) {
              that.$message.success(res.msg);
              that.query();
            }
          });
        },
        onCancel() {
          that.$message.success("取消操作");
        }
      });
    },
    handlesearchData() {
      //搜索查询
      let data = { roleName: this.roleName_$_like };
      this.$axios.post("/role/service/findByPage", data).then(res => {
        if (res.code == 200) {
          this.data = res.data;
        }
      });
    },
    handlesearchclear() {
      //清空重置
      this.roleName_$_like = "";
      this.query();
    },
    onChangeRedeAll() {
      this.tabledata.forEach(item => {
        item.children.forEach(citem => {
          item.checked = this.checkedAll;
          citem.checked = this.checkedAll;
          this.checkedAllwrite = !this.checkedAll;
          item.checkedwrite = this.checkedAllwrite;
          citem.checkedwrite = this.checkedAllwrite;
        });
      });
      console.log(this.checkedAll);
    },
    onChangeWriteAll() {
      this.tabledata.forEach(item => {
        item.children.forEach(citem => {
          item.checkedwrite = this.checkedAllwrite;
          citem.checkedwrite = this.checkedAllwrite;
          this.checkedAll = !this.checkedAllwrite;
          item.checked = this.checkedAll;
          citem.checked = this.checkedAll;
        });
      });
      console.log("写", this.checkedAllwrite);
    },
    onChangeRede(val) {
      console.log(val);
      switch (val.checked) {
        case true:
          val.checked = true;
          this.tabledata.forEach(item => {
            if (item.id == val.parentId) {
              //新增加的
              item.checked = true;
              item.checkedwrite = false;
            }
            if (item.children.checkedwrite == val.checkedwrite) {
              this.checkedAllwrite = val.checkedwrite;
            }
          });
          val.checkedwrite = false;
          if (val.children) {
            val.children.forEach(item => {
              item.checked = true;
              item.checkedwrite = false;
            });
          }
          break;
        case false:
          val.checked = false;
          if (val.children) {
            val.children.forEach(item => {
              item.checked = false;
            });
          }
          break;
        default:
          return "";
      }
    },
    onChangeWrite(record) {
      switch (record.checkedwrite) {
        case true:
          record.checkedwrite = true;
          this.tabledata.forEach(item => {
            if (item.children.checkedwrite == record.checkedwrite) {
              this.checkedAllwrite = record.checkedwrite;
            }
          });
          record.checked = false;
          if (record.children) {
            record.children.forEach(item => {
              item.checkedwrite = true;
              item.checked = false;
            });
          }
          break;
        case false:
          record.checkedwrite = false;
          if (record.children) {
            record.children.forEach(item => {
              item.checkedwrite = false;
            });
          }
          break;
        default:
          return "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.rightstyle {
  margin-right: 12px;
}
.searchbox {
  margin: 15px 0;
}
</style>
